<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/toOneList' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>原材料管理</el-breadcrumb-item>
      <el-breadcrumb-item>原材料添加</el-breadcrumb-item>
    </el-breadcrumb>
    <!--标题-->
    <el-row class="box2">
      <h1 class="title">添加界面</h1>
    </el-row>
    <!--中间间隔-->
    <el-row class="box"></el-row>
    <!--添加界面-->
    <el-card class="box-card">
      <el-form :model="addForm" status-icon :rules="rules" >
        <!------------------------------------------------------------------------->
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="9">
            <el-form-item label="原材料编号" label-width="90px">
              <el-input v-model="addForm.code" disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="9">
            <el-form-item label="原材料名" prop="name" label-width="90px">
              <el-input v-model="addForm.name" placeholder="请输入原材料名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!------------------------------------------------------------------------->
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="9">
            <el-form-item label="化学元素名" prop="chemical" label-width="90px">
              <el-input v-model="addForm.chemical" placeholder="请输入化学元素名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="9">
            <el-form-item label="元素密度(g/cm³)" prop="density" label-width="90px">
              <el-input v-model="addForm.density" placeholder="请输入元素密度"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="9">
            <el-form-item label="元素硬度(hrc)" prop="hardness" label-width="90px">
              <el-input v-model="addForm.hardness" placeholder="请输入元素硬度"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="9">
            <el-form-item label="单价" prop="price" label-width="90px">
              <el-input v-model.number="addForm.price" placeholder="请输入单价"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="材料介绍">
              <el-input type="textarea" :rows="4" placeholder="请输入材料描述" v-model="addForm.remarks"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button @click="save()" plain type="info">添加</el-button>
        <el-button @click="reset()" type="primary">重置</el-button>
        <el-button @click="goback()" type="primary">返回</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
    export default {
        name: "MaterialAdd",
      data(){
        var checkdensity = (rule, value, callback) => {
          if (!/(^[1-9]([0-9] )?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
            callback(new Error('最多两位小数！！！'));
          } else {
            callback();
          }
        };
        var checkhardness = (rule, value, callback) => {
          if (!/(^[1-9]([0-9] )?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
            callback(new Error('最多两位小数！！！'));
          } else {
            callback();
          }
        };
          return{
            addForm:{},
            rules: {
              name: [
                { required: true, message: "材料名称不能为空", trigger: 'blur' }
              ],
              price: [
                { required: true, message: "原料单价不为空", trigger: 'blur' },
                { type: 'number', message: "原料单价必须为数字类型", trigger: 'blur' }
              ],
              chemical: [
                { required: true, message: "化学元素名称不能为空", trigger: 'blur' }
              ],
              density: [
                { validator: checkdensity, trigger: 'blur' }
              ],
              hardness: [
                { validator: checkhardness, trigger: 'blur' }
              ]
            }
          }
      },
      methods:{
        goback(){//返回
          this.$router.push('/material');
        },
        getcode(){//获取编号

          this.addForm.code=Math.floor(Math.random()*1000000);
        },
        save() {//原材料添加
          this.$http.post("/mater/save",this.addForm).then((res) => {
            if (res.data.success) {
              this.$message({
                message:res.data.message,
                type:"success"
              })
              this.$router.push('/material')
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        reset(){//重置
          this.addForm={};
        },
      },
      mounted() {
          this.getcode();
      }
    }
</script>

<style scoped>
  .row-bg {/*添加界面布局的样式*/
    padding: 10px 0;
  }
  .box2{/*添加界面的样式*/
    height: 80px;
    border-radius: 40px;
  }
  .box-card{/*列表的样式*/
    border-radius: 30px;
  }
  .box{/*中间的间隔*/
    height: 20px;
    background-color: #eaedf1;
  }
  .title{
    line-height:2.3px;
    text-align: center;
  }
</style>
